<template>
  <div>
    <group class="taskWrap">
      <!-- 任务列表 -->
      <card :header="{ title: taskItem.title }">
        <div class="managersList" slot="header" v-if="!isOverview">
          <div class="leaader">
            <div
              class="managerShow"
              v-for="(item_in, index_in) in taskItem.principal"
              :key="index_in"
            >
              <img class="avatar" :src="item_in.avatar" />
              <span class="name">{{ item_in.userName }}</span>
            </div>
            <span class="managerLogo">(管理员)</span>
          </div>
          <span class="taskTotalStatus">有更新></span>
        </div>

        <div slot="content" class="cardContent">
          <ul v-if="!isOverview">
            <div class="executorsList">
              <li
                v-for="(item_in, index_in) in taskItem.executors"
                :key="index_in"
              >
                <img class="avatar" :src="item_in.avatar" />
                <span class="name">{{ item_in.userName }}</span>
              </li>
            </div>
            <span class="executorsListLength" v-if="taskItem.executors"
              >{{ taskItem.executors.length }}人></span
            >
          </ul>
          <div v-if="!isOverview" class="taskInfo">
            <span class="title">任务简介：</span>
            <span>{{ taskItem.introduction }}</span
            ><br />
            <span class="title">截止日期：</span>
            <span>{{ taskItem.deadline }}</span>
          </div>
          <div class="taskStatusWrap">
            <div class="taskStatus">
              <span class="num">{{ toDoGoal }}</span>
              <span>待完成目标</span>
            </div>
            <div class="taskStatus">
              <span class="num" v-if="!taskItem.projectGoal"
                >{{ taskItem.projectGoal }}%</span
              >
              <span class="num" v-else>0%</span>

              <span>近期目标进度</span>
            </div>
            <div class="taskStatus">
              <span class="num">{{ doneGoal }}</span>
              <span>已完成目标</span>
            </div>
          </div>
        </div>
      </card>
    </group>
  </div>
</template>

<script>
import { XHeader, Group, XTextarea, XInput, Card } from "vux";
import task from "api/task";
export default {
  props: {
    taskItem: { type: Object },
    isOverview: { type: Boolean },
  },
  data() {
    return {
      executors: [1, 2, 3, 4, 5, 6],
      doneGoal: 0,
      toDoGoal: 0,
    };
  },
  components: {
    XHeader,
    Group,
    XTextarea,
    XInput,
    Card,
  },
  mounted() {
    this.getToDoGoal();
  },
  watch: {},
  methods: {
    // 计算待完成和已完成目标的数目
    getToDoGoal() {
      if (!!this.taskItem.projectGoal) {
        this.taskItem.projectGoal.forEach((element) => {
          if (element.isFinish) {
            this.doneGoal++;
          } else {
            this.toDoGoal++;
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.taskWrap {
  // 负责人和成员的样式都是img和这个span
  box-shadow: 3px 3px 3px rgba(195, 195, 195, 0.8);
  // margin-top: 30px;
  .avatar {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    margin-right: 5px;
  }
  .name {
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 10px;
    color: gray;
    margin-top: 4px;
  }
  .managersList {
    height: 45px;
    margin-left: 10px;
    display: flex;
    justify-content: space-between;
    .leaader {
      display: flex;
      .managerShow {
        display: flex;
        flex-direction: column;
      }
      .managerLogo {
        font-size: 12px;
        font-weight: bolder;
        color: #f99d4a;
        margin-left: 10px;
        line-height: 45px;
      }
    }
    .taskTotalStatus {
      margin-right: 10px;
      color: green;
      line-height: 45px;
    }
  }
  .cardContent {
    padding: 5px;
    ul {
      display: flex;
      justify-content: space-between;
      background-color: #f7f7f7;
      padding: 5px 10px;
      border-radius: 5px;
      height: 45px;
      .executorsList {
        display: flex;
        li {
          display: flex;
          flex-direction: column;
        }
      }
      .executorsListLength {
        line-height: 45px;
      }
    }
    .taskInfo {
      background-color: #f7f7f7;
      padding: 5px 10px;
      border-radius: 5px;
      line-height: 25px;
      span {
        font-size: 12px;
      }
      .title {
        font-weight: bold;
      }
    }
    .taskStatusWrap {
      display: flex;
      justify-content: space-around;
      line-height: 30px;
      padding: 5px 0;
      .taskStatus {
        display: flex;
        flex-direction: column;
        span {
          text-align: center;
        }
        .num {
          color: green;
          font-size: 16px;
          font-weight: bolder;
        }
      }
    }
  }
}
</style>
<style >
.weui-panel .weui-panel__hd {
  color: gray;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
</style>